import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
import axios from 'axios';
import '@/components/MusicHall/index/TopList/Banner.scss';
// import $ from 'jQuery';

 class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {
            aa : [],
            bb : [],
            cc : [],
            dd : [],
            ee : []
        }
        // this.toplist1=this.toplist1.bind(this)
        // this.toplist2=this.toplist2.bind(this)
        // this.toplist3=this.toplist3.bind(this)
        // this.toplist4=this.toplist4.bind(this)
        // this.toplist5=this.toplist5.bind(this)
    }
    // seek (e, index) {
    //     // console.log(e)
    //     fetch('https://api.bzqll.com/music/netease/search?key=579621905&s='+e+'&type=song&limit=3&offset=0')
    //         .then(res => res.json())
    //         .then(data => {
    //             console.log(data.data[0].id)
    //         }) 
    // }
    
    goDetail (id) {
        // console.log(this.props)
        this.props.history.push('/player/' + id)
    }

    componentDidMount () {
        axios.all([
            axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=流行&type=song&limit=3&offset=0'),
            axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=热歌&type=song&limit=3&offset=0'),
            axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=新歌&type=song&limit=3&offset=0'),
            axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=欧美&type=song&limit=3&offset=0'),
            axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=韩国&type=song&limit=3&offset=0')])
        .then(axios.spread((toplist1data, toplist2data, toplist3data, toplist4data, toplist5data) => {
            // console.log(toplist1data)
            this.setState({
                aa : toplist1data.data.data,
                bb : toplist2data.data.data,
                cc : toplist3data.data.data,
                dd : toplist4data.data.data,
                ee : toplist5data.data.data,
            })
        }))
    }

    // toplist1 () {
    //     return axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=流行&type=song&limit=3&offset=0')
    // }
    // toplist2 () {
    //     return axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=热歌&type=song&limit=3&offset=0')
    // }
    // toplist3 () {
    //     return axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=新歌&type=song&limit=3&offset=0')
    // }
    // toplist4 () {
    //     return axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=欧美&type=song&limit=3&offset=0')
    // }
    // toplist5 () {
    //     return axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=韩国&type=song&limit=3&offset=0')
    // }

    aaaa () {
        console.log(this.state.aa)
    }

    render () {
        return (
          <div className='toplist-box'>
                <div className='toplist-out'>
                    <div>
                        <p onClick={this.aaaa.bind(this)}>巅峰榜</p>
                        <h2>流行指数</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.aa.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id } onClick = { this.goDetail.bind(this, item.id) }>
                                        <em>{index}</em>
                                        <p>
                                            <b>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
             <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>热歌</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.bb.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
             <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>新歌</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.cc.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
                <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>欧美</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.dd.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
                 <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>韩国</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.ee.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
          </div>
        )
    }     
 }
export default Banner;